<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07jQuery动画</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 一、基本动画
            // show()       将隐藏的元素显示
            // hide()       将可见的元素隐藏。
            // toggle()     可见就隐藏，不可见就显示。
            //     以上动画方法都可以添加参数。
            //     1、第一个参数是动画执行的时长，以毫秒为单位
            //     2、第二个参数是动画的回调函数(动画完成后自动调用的函数)

            // 二、淡入淡出动画
            // fadeIn()     淡入（慢慢可见>
            // fadeOut()    淡出（慢慢消失）
            // fadeToggle() 淡入/淡出切换
            // fadeTo()     在指定时长内慢慢的将透明度修改到指定的值。0透明，1完成可见，0.5半透明

            $("div").css({"font-size": "3em", "background-color": "yellow"});


            $("button:contains('show')").click(function () {
                $("div").show('slow');
            })
            $("button:contains('hide')").click(function () {
                $("div").hide('slow');
            })
            $("button:contains('toggle')").click(function () {
                $("div").toggle('slow');
            })

            $("button:contains('fadeIn')").click(function () {
                $("div").fadeIn('slow');
            })
            $("button:contains('fadeOut')").click(function () {
                $("div").fadeOut('slow');
            })
            $("button:contains('fadeToggle')").click(function () {
                $("div").fadeToggle();
            })
            $("button:contains('fadeTo')").click(function () {
                $("div").fadeTo('slow', 0.5);
            })
        });
    </script>
</head>
<body>

<button>show</button>
<button>hide</button>
<button>toggle显示隐藏切换</button>
<br>
<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle淡入淡出切换</button>
<button>fadeTo</button>

<div>div1div1</div>

</body>
</html>